<template>
  <div class="header">
    <div class="left-content">
<el-button size="small" @click="store.toggleCollapse">
  <component class="icons" :is="Menu"></component>
</el-button>
<el-breadcrumb separator="/" class="bread">
    <el-breadcrumb-item :to="{ path: '/' }"><h2>首页</h2></el-breadcrumb-item>
   
  </el-breadcrumb>
    </div>
    <div class="right-content">
      <el-dropdown>
    <span class="el-dropdown-link">
     <img :src="getImageUrl('user')" class="user"/>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>个人中心</el-dropdown-item>
        <el-dropdown-item>退出</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</div>
  </div>
</template>
<script setup>

import { useAllDateStore } from '@/stores'
const store = useAllDateStore()
import { computed, ref } from 'vue';
const getImageUrl = (user) => {
  return new URL(`../assets/images/${user}.png`, import.meta.url).href
}
import {
  Menu,
  VideoPlay,
  User,
  Location,
  Setting,
} from '@element-plus/icons-vue'


</script>
<style lang="less">
.header{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
height:100%;


}
.icons{
  width:18px;
  height:18px;

}
.left-content{
  display:flex;
align-items:center;
.el-botton{
margin-right:20px;
}
}
.right-content{
  .user{
    width:40px;
    height:40px;
    border-radius:50%;
  }
}
:deep(.bread span ){
  color:#fff !important;
}
</style>